<template>
  <div class="messageList_wrapper" ref="messageListDiv">
    <HeaderSearchInput v-model="messageSearch"></HeaderSearchInput>
    <MessageList v-model="data"></MessageList>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from 'vue';
import MessageList from './components/messagelist/MessageList.vue';
import type { MessageItemType } from './components/messagelist/MessageItem.vue';
import { useMessageStore } from '@/stores/messageStore';
import HeaderSearchInput from '@/components/search_input/HeaderSearchInput.vue';
const messageSearch = ref();
const messageStore = useMessageStore();
const messageListDiv = ref<HTMLDivElement>();
const data = ref<Array<MessageItemType>>(messageStore.messageList);

onMounted(() => {
  //2025/9/22 1.46: 草, 绕死我了
  if (messageStore.currentScroll) {
    messageListDiv.value?.scrollTo({
      'top': messageStore.currentScroll,
      'behavior': 'instant'
    })
  }
  const handleScroll = () => {
    console.log(messageListDiv.value?.scrollTop);
    messageStore.currentScroll = messageListDiv.value?.scrollTop as number;
  }
  messageListDiv.value?.addEventListener('scroll', handleScroll)

  onUnmounted(() => {
    messageListDiv.value?.removeEventListener('scroll', handleScroll);
  });
})

const init = () => {

}
</script>

<style lang="scss" scoped>
.messageList_wrapper {
  overflow-y: auto;
  height: 100%;

  .messageSearch {
    background-color: rgb(239, 239, 239);
  }

  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
